import React, { memo } from 'react'
import { shallowEqual,  useSelector } from 'react-redux'
import { DjradioInfoWrapper,ContentWrapper ,NavWrapper} from './style'
import {formatImg,formatCount} from '@/utils/format'
export default memo(function DjradioInfo() {
  const {  djradioDetail } = useSelector(state => ({
    djradioDetail:state.getIn(['djRadio','djradioDetail'])
  }), shallowEqual)
  const info = djradioDetail || {}
  return (
    <DjradioInfoWrapper>
      <ContentWrapper>
      <div className="left">
        <img src={formatImg(info.picUrl, 200)} alt="" />
        <div className="mask sprite_covor"></div>
      </div>
      <div className="right">
        <div className="title">
          <i className='icon sprite_icon2'></i>
          <h2 className='name'>{info.name}</h2>
        </div>
        <div className="creator">
          <img src={formatImg(info.dj?.avatarUrl, 35)} alt="" />
          <div className="nickname">
            {info.dj?.nickname}
            <img src={info.dj?.avatarDetail?.identityIconUrl} alt="" className='icon'/>
          </div>
        </div>
        <div className="operation">
          <div className="sub sprite_button oper">订阅({formatCount(info.subCount)})</div>
          <div className="play sprite_button oper">播放全部</div>
          <div className="share sprite_button oper">分享({formatCount(info.shareCount)})</div>
        </div>
        <div className="desc">
          <p>
            <span className='category'>{info.category}</span>
            {info.desc}
          </p>
        </div>
      </div>
      </ContentWrapper>
      <NavWrapper>
        <h3 className='title'>节目列表</h3>
        <div className="total">共{info.programCount}期</div>
      </NavWrapper>
    </DjradioInfoWrapper>
  )
})
